<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>SpotMangerTitle</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/login.css" media="all">
    <!--[if lt IE 9]>
    <script src="../layui/html5.min.js"></script>
    <script src="../layui/respond.min.js"></script>
    <![endif]-->
    <style>
        body {
            background-position: center center;
            background-size: 100% 65%;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        .input:-webkit-autofill {
            -webkit-box-shadow: inset 0 0 0 1000px #fff;
            background-color: transparent
        }

        .admin-login-background {
            width: 300px;
            height: 300px;
            padding: 0px -250px;
            margin-top: 5%;
            margin-left: 40%;
        }

        .admin-header {
            text-align: center;
            margin-bottom: 20px;
            color: #FFFFFF;
            font-weight: bold;
            font-size: 25px
        }
        .admin-input {
            border-top-style: none;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            height: 50px;
            width: 300px;
            padding-bottom: 0px
        }

        .admin-input::-webkit-input-placeholder {
            color: #011446
        }

        .layui-icon-username {
            color: #011446 !important
        }

        .layui-icon-username:hover {
            color: #9dadce !important
        }

        .layui-icon-password {
            color: #011446 !important
        }

        .layui-icon-password:hover {
            color: #9dadce !important
        }

        .admin-input-username {
            border-top-style: solid;

        }

        .admin-input-verify {

        }

        .admin-button {
            margin-top: 20px;
            font-weight: bold;
            font-size: 18px;
            width: 300px;
            height: 50px;
            border-radius: 5px;
            background-color: #011446;
            border: 1px whitesmoke
        }

        .admin-icon {
            margin-left: 260px;
            margin-top: 10px;
            font-size: 30px
        }

        i {
            position: absolute
        }

        .admin-captcha {
            position: absolute;
            margin-left: 205px;
            margin-top: -45px
        }

        .login-title {
            font-family: Microsoft YaHei;
            text-align: center;
            color: #011446;
            font-size: 30px;
            font-weight: 900;
            margin-top: 1%;
            margin-bottom: 1%;
        }

        .login-title2 {
            text-align: center;
            color: #6d6d6d;
            font-size: 13px;
            font-weight: bold;
            margin-top: 5%;
        }

        .login-title3 {
            text-align: center;
            color: #6d6d6d;
            font-size: 9px;
            font-weight: lighter;
        }

        .login-title4 {
            text-align: center;
            color: #6d6d6d;
            font-size: 9px;
            font-weight: lighter;
        }

    </style>
</head>
<body>

<div class="container">
    <div class="layui-row login-title">土 地 损 毁 及 复 垦 图 斑 管 理</div>
    <div class="layui-col-sm12 layui-col-md12">
        <div class="layui-carousel zyl_login_height" id="zyllogin" lay-filter="zyllogin" lay-anim="fade"
             lay-indicator="none" lay-arrow="hover" style="height: 100% !important; width: 100%;">
            <img src="../images/photo2.jpg" height="100%" width="100%">

        </div>
    </div>

    <div class="layui-row">
        <div class="layui-col-sm12 layui-col-md12 zyl_center zyl_mar_01">
            <!--            <p class="login-title2"> © 2021辽宁省自然资源厅版权所有</p>-->
            <!--            <p class="login-title3">技术支持：中国矿业大学（北京）</p>-->
            <p class="login-title4">建议使用<a href="https://guanjia.qq.com/sem/1005/index.html?ADTAG=media.buy.baidu.SEM">谷歌浏览器</a>
            </p>
        </div>
    </div>

    <div class="zyl_lofo_main">
        <div class="layui-row">
            <div class="admin-login-background">
                <div class="admin-header">
                    <span>欢迎登陆</span>
                </div>
                <form class="layui-form" action="">
                    <div>
                        <i class="layui-icon layui-icon-username admin-icon"></i>
                        <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"
                               class="layui-input admin-input admin-input-username" value="admin">
                    </div>
                    <div>
                        <i class="layui-icon layui-icon-password admin-icon"></i>
                        <input type="password" name="password" placeholder="请输入密码" autocomplete="off"
                               class="layui-input admin-input" value="123456">
                    </div>
                    <div>
                        <input type="text" name="captcha" id="captcha" placeholder="请输入验证码" autocomplete="off"
                               class="layui-input admin-input admin-input-verify">
                        <img class="admin-captcha" width="90" height="40" src="../sys/getVerify">
                        <img onClick="this.src=this.src+'?'+Math.random();" id="img" class="admin-captcha" width="90"
                             height="40" src="../sys/getVerify">
                    </div>
                    <button class="layui-btn admin-button" lay-submit="" lay-filter="login">登 陆</button>
                </form>
            </div>
        </div>
    </div>


    <script src="../layui/layui.js"></script>
    <script src="../js/core.util.js"></script>

    <script>
        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer,
                $ = layui.jquery;


            // 进行登录操作
            form.on('submit(login)', function (data) {
                data = data.field;
                if (data.captcha == '') {
                    layer.msg('请输入验证码');
                    return false;
                }
                if (data.username == '') {
                    layer.msg('用户名不能为空');
                    return false;
                }
                if (data.password == '') {
                    layer.msg('密码不能为空');
                    return false;
                }

                $.ajax({
                    type: 'POST',
                    url: '../sys/user/login',
                    dataType: "JSON",
                    data: JSON.stringify(data),
                    contentType: "application/json",
                    success: function (res) {
                        if (res.code == 0) {
                            layui.data('LocalData', {
                                key: "access_token",
                                value: res.data.accessToken
                            })
                            layer.msg('登录成功', {time: 500}, function () {
                                window.location = CoreUtil.getContext() +  '/index/home';
                            });
                        } else {
                            layer.msg(res.msg);
                            $("#img").click();
                        }
                    }
                })

                return false;
            });
        });
    </script>
</div>
</body>
</html>
